<template>
  <div>
    <div>
      <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="1"
        :formType="type"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />
      <el-form
        :model="botform"
        ref="addSearchForm"
        size="mini"
        label-width="100px"
        inline-message
        >
        <el-form-item v-if="type !== 'show'" label="" prop="disclaimer">
          <el-popover
            placement="top-start"
            title="免责声明"
            width="400"
            trigger="hover">
              <div style="border-top: 1px solid #eee;padding:'0';margin:'0';">
                <p>1. 本平台不对用户发布的任何内容(包括但不限于文章、图片、视频)的准确性进行保证。</p>
                <p>2. 用户需对所发表的内容负责，因所发表内容引发的一切纠纷，由该内容的发表者承担全部法律及连带责任。</p>
              </div>
            <el-radio v-model="radio" label="disclaimer" slot="reference">已阅读并同意<span style="color:#1588FF;">《免责声明》</span></el-radio>
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="preview('addSearchForm')">预 览</el-button>
      <el-button @click="closeDialog">取 消</el-button>
      <!-- <el-button v-if="type !== 'show'" :disabled="isDisabled" @click="saveDialog('addSearchForm','save')" type="primary">保 存</el-button>
      <el-button v-if="type !== 'show'" :disabled="isDisabled" @click="saveDialog('addSearchForm','release')" type="primary">发 布</el-button> -->
        <multiuse-button v-if="type !== 'show'" :disabled="isDisabled" type="primary" :click="saveDialog.bind(this, 'addSearchForm','save')" :auth-list="auths" auth-mark="/api/information/posters/postersTemplate/addPostersTemplate">保 存</multiuse-button>
        <multiuse-button v-if="type !== 'show'" :disabled="isDisabled" type="primary" :click="saveDialog.bind(this, 'addSearchForm','release')" :auth-list="auths" auth-mark="/api/information/posters/postersTemplate/publish?id=${id}">发 布</multiuse-button>
    </div>
    <!--详情dialog-->
    <preview-dialog type="posters" ref="preview-dialog" />
  </div>
</template>

<script>
import {
  addPosters,
  editPubPosters,
 } from '@/api/community/posters/index';
import { tcCodeList } from '@/api/community/news/index';
import { dictionary } from '@/utils/dictMixin';
import previewDialog from "@/components/community/previewDialog";

import { authority } from '@/utils/authMixin';
export default {
  name: 'NewsModal',
  mixins: [dictionary,authority],
  components: {
    previewDialog
  },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = null;
    return {
      formList: this.createFormList(),
      radio: '',
      isDisabled: false, //表单重复提交
      botform:{}
    };
  },
  created() {
    this.init();
    this.getTccodeList('2031', 'templateType')
  },
  methods: {
    init() {
      if (this.type === 'edit' || this.type === 'show') {
        // 更新接口需要的记录 ID
        this.recordId = this.rowData.templateId;
        let arr = [];
        arr.push(this.rowData.caseUrl)
        this.rowData.caseUrl = arr
        this.formList.forEach(x => {
          x.initialValue = this.rowData[x.fieldName];
        });

        this.botform = this.rowData
        this.isDisabled = false
      }
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '海报名称',
          disabled: this.type === 'show'?true:false,
          fieldName: 'templateName',
          rules: [{ required: true, message: '请输入海报名称', trigger: 'blur' },
                  { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }]
        },
        {
          type: 'TEXT_AREA',
          rows: 4,
          label: '描述',
          disabled: this.type === 'show'?true:false,
          fieldName: 'describes',
          placeholder: '请输入内容',
        },
        {
          type: 'SELECT',
          label: '海报类型',
          fieldName: 'templateType',
          placeholder: '请选择',
          itemList: [],
          rules: [{ required: true, message: "请选择海报类型", trigger: "change"}]
        },
        {
          type: 'UPLOAD_IMG',
          label: '海报图片',
          disabled: this.type === 'show'?true:false,
          fieldName: 'caseUrl',
          placeholder: '请上传海报图片',
          rules: [{ required: true, message: '请上传海报图片', trigger: 'change' }],
          upload: {
            actionUrl: '/api/file/oss/upload',
            fixedSize: [4, 5],
            isCalcHeight: true,
          }
        },
      ];
    },
    formChangeHandle(val) {
      this.saveData = {...this.saveData, ...val};
    },
    async getTccodeList(tcCode,name) {
      const res = await tcCodeList(tcCode);
      if (res.resultCode === 200) {
        this.formList.find(item=>item.fieldName===name).itemList = res.data.map(x => ({ value: x.codeId, text: x.codeCnDesc }));
      }
    },
    async saveDialog(formName,status) {
      this.$refs.formPanel.SUBMIT_FORM();
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.save(status)
        }else{
          this.$message.info("请填写必填项!");
          return false;
        }
      });
    },
    async save(status){
      this.saveData.caseUrl = this.saveData.caseUrl[0]
      if (status === 'release') {
        this.saveData.publishStatus = 20221002;    // 发布状态先设置为已发布

        this.isDisabled= true
        let data = {
          radio: this.radio
        };
        // 校验是否选择免责声明
        if (status === "release" && (data.radio == null || data.radio == "")) {
          this.$confirm('请同意免责声明!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          this.isDisabled = false
          return false;
        }
        let  res = {};
        if (this.type === 'add') {
          res = await addPosters(this.saveData);
        }else{
          this.saveData.templateId = this.recordId
          res = await editPubPosters(this.recordId,this.saveData);
        }
        console.log('发布', res)
        if (res.resultCode === 200) {
          this.isDisabled = false
          this.closeDialog('refresh');
        } else {

        }
      } else {
        this.$refs.formPanel.SUBMIT_FORM();
          let res = {};
          if (this.type === 'add') {
            this.saveData.caseUrl = this.saveData.caseUrl[0]
            this.saveData.publishStatus = 20221001;    // 发布状态先设置为未发布
            res = await addPosters(this.saveData);
            console.log('保存', res)
          }
          if (this.type === 'edit') {
            this.saveData.caseUrl = this.saveData.caseUrl[0]
            this.saveData.templateId = this.recordId
            res = await editPubPosters(this.recordId, {...this.botform,...this.saveData});
            console.log('编辑保存', res)
          }
          if (res.resultCode === 200) {
            this.isDisabled = false
            this.closeDialog('refresh');
          }
      }
    },
    // 预览
    preview(formName) {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.type === 'show') {
        this.$refs['preview-dialog'].open(this.rowData.caseUrl[0])
      } else {
        if (this.saveData !== null) {
          this.$refs['preview-dialog'].open(this.saveData.caseUrl[0])
        }
      }
    },
    closeDialog(param) {
      this.$emit('close', false, param);
    },
  }
};
</script>

<style lang="less" scoped>
</style>
